<template>
    <div class="container">
        <el-row :gutter="10">
            <el-col :xs="10" :sm="8" :md="8" :lg="6" :xl="4" :offset="2">
                <div class="textarea">
                    <textarea v-model="textarea.title" maxlength="50" rows="2" cols="50" placeholder="标题~" />
                    <textarea v-model="textarea.content" maxlength="300" rows="8" cols="50" placeholder="去发布~" />

                    <div class="textarea-button">
                        <el-button type="success" @click="save">发布速记</el-button>
                        <el-button type="success" @click="drawer2 = true" v-if="isLogin"><el-icon>
                                <MessageBox />
                            </el-icon>我有高论</el-button>
                        <el-button type="success" @click="cancel">取消</el-button>

                    </div>
                    <el-drawer v-model="drawer2" :direction="direction" size="80%">

                        <template #default>
                            <div>
                                <wangEditor @editorcontent="editorcontent" />
                            </div>
                        </template>
                        <template #footer>
                            <div style="flex: auto">
                                <el-button @click="cancelEditor">取消</el-button>
                                <el-button type="primary" @click="confirmEditor">提交</el-button>
                            </div>
                        </template>
                    </el-drawer>
                </div>
            </el-col>
            <el-col :xs="8" :sm="6" :md="7" :lg="9" :xl="12">
                <div class="middle-model">
                    <div class="top-select">
                        <div class="radio-group">
                            <el-button size="large" :class="clickradioindex == 1 ? 'active' : ''"
                                @click="changeRadio(1, 'like')">最热</el-button>
                            <el-button size="large" :class="clickradioindex == 2 ? 'active' : ''"
                                @click="changeRadio(2, 'create_time')">最新</el-button>
                        </div>

                        <el-input v-model="input" @change="onSearch" style="width: 240px" placeholder="搜索标题" />
                    </div>
                    <ul class="infinite-list">
                        <li v-for="item, index in dataList" :key="item.articleid" class="infinite-list-item">
                            <div class="avatar">
                                <div class="avatar-left">
                                    <el-avatar :src="item.user.avatarUrl" size="40"></el-avatar>
                                    <div class="name">{{ item.user.username }}</div>
                                    <div class="time">{{ item.create_time }}</div>
                                </div>

                                <div class="more">
                                    <el-button :class="clickmoreindex == index ? 'arrowtoleft1' : ''" type="primary"
                                        circle>
                                        <el-icon>
                                            <Hide />
                                        </el-icon>
                                    </el-button>
                                    <el-button :class="clickmoreindex == index ? 'arrowtoleft2' : ''" type="info"
                                        circle>
                                        <el-icon>
                                            <Share />
                                        </el-icon></el-button>
                                    <el-button :class="clickmoreindex == index ? 'arrowtoleft3' : ''" type="danger"
                                        circle @click="clickdetele(index)">
                                        <el-icon>
                                            <Delete />
                                        </el-icon>
                                    </el-button>
                                    <el-button class="moreicon" circle @click="clickmore(index)"><el-icon>
                                            <More />
                                        </el-icon></el-button>
                                </div>

                            </div>
                            <div class="content">
                                <div class="title">{{ item.title }}</div>
                                <div v-html="item.content"></div>
                            </div>

                            <div class="bottom">
                                <div class="yes-button" @click="clickyes(index, item.articleid)">
                                    <el-icon color="rgb(250, 181.5, 181.5)">
                                        <Pointer />
                                    </el-icon>
                                    {{ item.like }}
                                </div>
                                <div class="lookmore-button" @click="godetail(item.articleid)">
                                    <el-icon>
                                        <DArrowRight />
                                    </el-icon>查看原文
                                </div>
                            </div>
                        </li>
                    </ul>
                    <el-pagination background layout="prev, pager, next" v-model:current-page="currentPage"
                        :total="100" />
                </div>
            </el-col>
            <el-col :xs="4" :sm="6" :md="7" :lg="7" :xl="6">
                <aichat />
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
import aichat from '@/views/aichat/index.vue'
import { commonAjax } from '@/util/request.js'
import { switchtime } from '@/util/time.js'
import wangEditor from '@/components/wangeditor.vue'
import { ref, watch, computed } from 'vue'
import { v4 as uuidv4 } from 'uuid';
import { useRouter } from 'vue-router';
const router = useRouter()
const isLogin = computed(() => localStorage.getItem('isLogin'))
const dataList = ref([])
const keyword = ref('')
const loading = ref(false)
const textarea = ref({ title: '', content: '' })
const input = ref('')
const clickmoreindex = ref(-1)
const clickradioindex = ref(1)
const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}')
const page = ref(1)
const pageSize = ref(5)
const sort = ref('like')
const currentPage = ref(1)
watch([keyword, currentPage], (newVal, oldVal) => {
    console.log(newVal, oldVal);
    if (newVal[0]) {
        page.value = 1
        dataList.value = []
        getlist()
    }
    if (newVal[1]) {
        page.value = newVal[1]
        getlist()
    }

})

const changeRadio = (index, sort1: string) => {
    clickradioindex.value = index;
    dataList.value = []
    sort.value = sort1
    page.value = 1
    getlist()
}
const onSearch = (value: any) => {
    console.log(value);
    keyword.value = value

}
const editorcontent = (value) => {
    textarea.value.content = value;
}
const getlist = () => {
    let _this = this;
    return new Promise((resolve, reject) => {
        commonAjax({
            url: `${Config.serverUrl}/article/findAll`,
            data: {
                keyword: keyword.value,
                page: page.value,
                pageSize: pageSize.value,
                sort: sort.value
            },
            type: 'POST'
        })
            .then((result) => {
                console.log('findAll', result.data);

                if (result && result.code == 200) {
                    dataList.value = result.data
                    resolve()
                }
            })
            .catch((err) => {
                ElMessage.warning(err.message)
            });
    })
}
getlist(page.value, 100, 'hot')

const save = () => {
    if (!isLogin.value) {
        ElMessage({
            message: '请先登录',
            type: 'warning',
        })
        return
    }

    let _this = this;
    return new Promise((resolve, reject) => {
        commonAjax({
            url: `${Config.serverUrl}/article/add`,
            data: {
                articleid: uuidv4(),
                title: textarea.value.title || '',
                content: textarea.value.content,
                userid: userInfo.userid
            },
            type: 'POST'
        })
            .then((result) => {
                if (result && result.code == 200) {
                    ElMessage({
                        showClose: true,
                        message: '提交成功',
                        type: 'success',
                    })
                    textarea.value.title = '';
                    textarea.value.content = '';
                    getlist()
                    resolve()
                }
            })
            .catch((err) => {
                ElMessage.warning(err.message[0])
            });
    })
}
const cancel = () => {
    textarea.value = { title: '', content: '' }
}
import type { DrawerProps } from 'element-plus'

const drawer2 = ref(false)
const direction = ref<DrawerProps['direction']>('btt')

function cancelEditor() {
    drawer2.value = false
}
function confirmEditor() {
    save().then(() => {
        drawer2.value = false
    })
}

const godetail = (articleid) => {

    router.push({
        path: '/detail',
        query: { articleid: articleid }
    })
}
const clickdetele = (index: any) => {
    clickmoreindex.value = -1
    dataList.value.splice(index, 1)
}
const clickyes = (index: any, articleid) => {
    let _this = this;
    return new Promise((resolve, reject) => {
        commonAjax({
            url: `${Config.serverUrl}/article/like`,
            data: {
                articleid: articleid
            },
        })
            .then((result) => {
                if (result && result.code == 200) {
                    dataList.value[index].like++
                    ElMessage.success('点赞成功')
                }
            })
            .catch((err) => {
                ElMessage.warning(err.message)
            });
    })
}
const clickmore = (index: number) => {
    if (clickmoreindex.value != index) {
        clickmoreindex.value = index
    } else {
        clickmoreindex.value = -1
    }
}
//下拉刷新加载
const load = async () => {
    console.log(1);

    loading.value = true
    // if (dataList.value.length > 10) {
    //     return
    // }
    page.value++
    await getlist()
    console.log('dataList', dataList.value);

    // dataList.value.push({
    //     avatar: '1',
    //     name: '张三',
    //     time: '2023-01-01',
    //     content: '<h2 style="color:#000">这是标题</h2>这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容',
    //     like: 100,
    //     comment: 100,
    //     id: uuidv4()
    // })
}
</script>

<style></style>
<style scoped lang="scss">
@import './css/main.scss'
</style>